<template>
    <div class="contactGroup">
        <ContactGroupLine 
            @expandedEmit="expandedMethod" 
            :group-name="groupName" 
            :count="count"
            :expandState="expanded"/>
        <div v-if="expandState">
            <ContactGroupItem 
                v-for="(item,index) in contactGroupItemList" 
                :key="index"
                :contactItemList="item.contactItemList" 
                :typeName="item.typeName"
                :selectedItemUniqueId="selectedUniqueId"
                @clickContactGroupItemEmit="clickContactGroupItemMethod"/>
        </div>
    </div>
</template>
<script>
import ContactGroupLine from '@/components/ContactGroupLine.vue';
import ContactGroupItem from '@/components/ContactGroupItem.vue';
export default {
    name: 'ContactGroup',
    components: {
        ContactGroupLine,
        ContactGroupItem,
    },
    data() {
        return {
            expandState: false, // 是否展开
            selectedUniqueId: '', // 选中的联系人ID
        };
    },
    created(){
        // 设置初始展开状态
        this.expandState = this.expanded;
    },
    props: {
        // 分组名称
        groupName: {
            type: String,
            default: ''
        },
        // 是否展开
        expanded: {
            type: Boolean,
            default: false
        },
        count: {
            type: Number,
            default: 0
        },
        // 联系人分组列表
        contactGroupItemList: {
            type: Array,
            default: () => [] // [{ typeName: '', contactItemList: [] }]
        },
    },
    methods: {
        // 展开关闭
        expandedMethod(expandState){
            this.expandState = expandState;
        },
        // 点击联系人回调
        clickContactGroupItemMethod(item){
            this.$emit('clickContactGroupItemEmit', item);
            this.selectedUniqueId = item.uniqueId;
        }
    },
}

</script>
<style scoped>
.contactGroup{
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>